<template>
  <div class="center_bottom">
    <Echart
      :options="options"
      id="topRightChart"
      class="echarts_bottom"
    ></Echart>
  </div>
</template>

<script>
import { currentGET } from "api";
import { graphic } from "echarts";
export default {
  data() {
    return {
      options: {},
    };
  },
  props: {},
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.pageflag = true;
      currentGET("big6", { companyName: this.companyName }).then((res) => {
        console.log("安装计划", res);
        if (res.success) {
          this.init(res.data);
        } else {
          this.pageflag = false;
          this.$Message({
            text: res.msg,
            type: "warning",
          });
        }
      });
    },
    init(newData) {
      this.options = {
        color: ['#e86452', '#00eaff'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                },
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        grid: {
          top: '10%',
          right: '5%',
          left: '8%',
          bottom: '10%',
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06', '12-07'],
            splitLine: {
                show: false
            },
            axisTick: {
                show: false,
                alignWithLabel: true,
            },
            axisLine: {
                lineStyle: {
                    color: '#03405d'
                }
            },
            axisLabel: {
                color: '#F3F4F4',
                textStyle: {
                    fontSize: 12
                },
            },
        },
        yAxis: {
            type: 'value',
            name: '单 位：立方米',
            max: 750,
            interval: 150,
            nameTextStyle: {
              color: '#FFF'
            },
            axisLabel: {
                color: '#F3F4F4',
                textStyle: {
                    fontSize: 12
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#03405d'
                }
            },
            axisLine: {
                show: false
            },
        },
        series: [{
            name: '取水统计',
            type: 'bar',
            barWidth: '18',
            itemStyle: {
                normal: {
                    color: graphic.LinearGradient(0, 0, 1, 1, [
                          {
                              offset: 0,
                              color: 'rgba(7, 231, 173, 1)', // 0% 处的颜色
                          },
                          {
                              offset: 0.98,
                              color: 'rgba(7, 231, 173, 0)', // 100% 处的颜色
                          },
                      ],
                      false
                    )
                },
            },
            data: [195,620,660,644,550,565,376, 200, 380]
          }
        ]
      };
    },
  },
};
</script>
<style lang="scss" scoped>
  .center_bottom {
    width: 100%;
    height: 100%;

    .echarts_bottom {
      width: 100%;
      height: 100%;
    }
  }
</style>
